<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About</title>
    <link type="text/css" rel="stylesheet" href="{{ style.common }}"/>
    <link type="text/css" rel="stylesheet" href="{{ style.about }}"/>
</head>
<body>
<style type="text/css" rel="stylesheet">
    @font-face {
        font-family: 'Typo';
        font-style: normal;
        src: local('Typo'), local('Typo'), url({{ statics['TypoGraphica.otf'] }});
    }
</style>
<div id="header">
    <a id="username" href="{{ links.home }}">{{ user.username }}</a>
    <div id="nav">
        <a href="{{ links.home }}">HOME</a>
        <a href="{{ links.tags }}">TAGS</a>
        <a href="{{ links.archives }}">ARCHIVES</a>
        <a class="selected" href="{{ links.about }}">ABOUT</a>
    </div>
</div>
<div id="about">
    <h4>About</h4>
    <hr/>
    <img id="avatar" src="{{ user.avatar }}">
    <h2 id="name">{{ user.name || user.username }}</h2>
    <h4 id="introduction">{{ user.selfIntroduction }}</h4>
    <a class="info" href="https://github.com/{{user.username}}">
        <img src="{{ statics['git.svg'] }}"/>
        <p>GitHub: {{ user.username }}</p>
    </a>
    <a class="info" href="mailto:{{ user.mail }}">
        <img src="{{ statics['mail.svg'] }}"/>
        <p>Mail: {{ user.mail }}</p>
    </a>
</div>

<div id="footer">
    <h3>Material</h3>
    <p>Powered With ❤ By <a>Page.qy</a></p>
</div>

</body>
</html>
